<script setup lang="ts">
import { ref } from 'vue'
import type { HospitalSearchListResponseData } from '@/apis/home/type'
import { getHospitalSearchListService } from '@/apis/home'

const hosname = ref<string>('')
const searchList = ref()
const getSearchList = async (querySearch: string, callback: any) => {
  const res: HospitalSearchListResponseData =
    await getHospitalSearchListService(querySearch)
  searchList.value = res.data.map((item) => ({
    value: item.hosname,
    id: item.hoscode
  }))
  callback(searchList.value)
}
</script>

<template>
  <div class="search">
    <el-autocomplete
      clearable
      :fetch-suggestions="getSearchList"
      v-model="hosname"
      :trigger-on-focus="false"
      placeholder="请输入医院名称"
      @select="
        ($event: any) =>
          $router.push({ path: '/hospital', query: { hoscode: $event.id } })
      "
      style="width: 600px"
    >
      <template #append>
        <el-button type="primary" icon="Search"></el-button>
      </template>
    </el-autocomplete>
  </div>
</template>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
